<template>
    <div class="recommend">
        <div class="title">{{title}}</div>
        <div class="list">
            <router-link :to="`/moviepage/${item.movieId}`"  class="item" v-for="item in movielist" :key="item.movieId">
                <div class="bg">
                    <img :src="item.poster" >
                    <div class="mv-sc">
                        观众评分&nbsp;&nbsp;
                        <span class="sc">{{item.score}}</span>
                    </div>
                </div>
                <h5 class="name ellipsis">{{item.name}}</h5>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        movielist:Array,
        title:String,
    },
}
</script>

<style lang="less" scoped>
.recommend{
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: #fff;
    .title{
        font-size: 14px;
        color: #333;
        margin: 0 0 12px;
    }
    .list{
        width: 100%;
        overflow: scroll;
        white-space: nowrap;
        .item{
            display: inline-block;
            width: 85px;
            overflow: hidden;
            margin-right: 10px;
            .bg{
                position: relative;
                width: 85px;
                height: 115px;
                margin-bottom: 6px;
                img{
                    width: 100%;
                    height: 115px;
                }
                &::after{
                    content: "";
                    // display: inline-block;
                    width: 100%;
                    height: 35px;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
                }
                .mv-sc{
                    position: absolute;
                    left: 4px;
                    bottom: 2px;
                    color: #faaf00;
                    font-size: 12px;
                    font-weight: 600;
                    z-index: 2;
                }
            }
            .name{
                font-size: 14px;
                color: #222;
                margin: 0 0 3px;
                font-weight: 700;
            }
            .ellipsis{
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
        
    }
}
.recommend::-webkit-scrollbar{width:0;}
</style>